{% extends "../base.html" %}

<!-- =================================================================== -->
<!-- Page onload ======================================================= -->
<!-- =================================================================== -->
{% block BaseHead %}
<script type="text/javascript">
GW.pageOnLoad = function() {
    GW.div.fullscreen( "idBB" );
    GW.initTagEditTable();
    var oPB1 = new YAHOO.widget.Button("idAppendTag", { onclick: { fn: GW.tagAdd } });
    var oPB2 = new YAHOO.widget.Button("idSaveTag", { onclick: { fn: GW.tagSave, obj:{exit:false} }});
    GW.wait.hide();
    GW.log.log( 'tags.html init' );
};
GW.initTagEditTable = function(){
    // Setup data source
    GW.src = new YAHOO.util.XHRDataSource("/gw/json/tags");
    GW.src.responseType = YAHOO.util.DataSource.TYPE_JSON;
    GW.src.connXhrMode = "queueRequests";
    GW.src.responseSchema = { resultsList: "tags", 
                              fields: ["tag", "description"] };
    // Setup data table
    GW.col = [
        // Actual data fields
        {key: "tag", label: 'Tag', 
            sortable:true, resizeable:true, minWidth:200, 
            editor: new YAHOO.widget.TextboxCellEditor({disableBtns:true})},
        {key: "description", label: 'Description', 
            sortable:true, resizeable:true, minWidth:400, 
            editor: new YAHOO.widget.TextboxCellEditor({disableBtns:true})},
        // Action icons:
        // The action property is borrowed from Satyam.  It is used to customize
        // the behavior of these column to an onclick event.
        {key:'insert', label:'Add Before', className: 'insert-row-before', action: 'before' },
        {key:'delete', label:'Delete', className: 'delete-row', action: 'delete'}
    ];
    GW.dt = new YAHOO.widget.DataTable( "idTable", GW.col, GW.src );
    // Set up datatable editing flow
    GW.highlightEditableCell = function(oArgs) {
        var elCell = oArgs.target;
        if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")) {
            this.highlightCell(elCell);
        }
    };
    GW.dt.subscribe("cellMouseoverEvent", GW.highlightEditableCell);
    GW.dt.subscribe("cellMouseoutEvent", GW.dt.onEventUnhighlightCell);
    GW.dt.subscribe("cellClickEvent", function( oArgs ){
        var target = oArgs.target;
        var column = this.getColumn(target);
        // Columns with action icons should have an action property
        // The action property, not the visual image, determins the action.
        switch (column.action) {
            // For the delete action request user confirmation and call the ask method of the DataSource
            case 'delete':
                if (confirm('Are you sure?')) { 
                    this.deleteRow( target ); 
                }
                break;
            case 'before':
                this.addRow( GW.tagRow(), this.getRecordIndex(target));
                break;
            case 'after':
                this.addRow( GW.tagRow(), this.getRecordIndex(target)+1);
                break;
            default:
                // If no action is given, I try to edit it
                this.onEventShowCellEditor(oArgs);
                break;
            }
        })
    };
// Return default feature tag row values
GW.tagRow = function(){
    return { tag:'', description: ''}
};
// Handle add tag button
// This button is on the screen to allow tags to be added when there are no
// tags and thus no Add Before buttons.
GW.tagAdd = function(){
    GW.dt.addRow( GW.tagRow() );
};
// Handle save tags buttons
GW.tagSave = function( oargs, obj ){
    var exit = obj.exit;
    // Make a JSON object out of the tags
    var jsonData = [];
    var recordSet = GW.dt.getRecordSet();
    var records = recordSet.getRecords();
    for ( var rcd in records ){
        var data = records[rcd].getData();
        jsonData.push( data );
    }
    // Post to the GeoWiki server
    var callback = {
        success: function(o){
            var msg = 'Tag save succeeded. Status:' + o.status + ' Text:' + o.statusText;
            GW.log.log( msg, 'info', 'admin/tags' );
            alert('Tag save successful')
            if( exit ){
                window.location = "/admin";
            }
        },
        failure: function(o){
            var msg = 'Tag save failed. Status:' + o.status + ' Text:' + o.statusText;
            GW.log.log( msg, 'error', 'admin/tags' );
            alert( 'Tag save failed. Check log!' );
        },
        timeout: 10000
    };
    var jsonStr = YAHOO.lang.JSON.stringify(jsonData);
    YAHOO.util.Connect.setDefaultPostHeader( false );
    YAHOO.util.Connect.initHeader( "Content-Type","application/json; charset=utf-8" );
    var request = YAHOO.util.Connect.asyncRequest('POST', '/gw/json/tags', callback, jsonStr);
};
</script>
{% endblock %}

<!-- =================================================================== -->
<!-- Page body ========================================================= -->
<!-- =================================================================== -->
{% block BaseBody %}
<style type="text/css">
    .delete-row {
        cursor:pointer;
        background: transparent url(/static/img/deleterow.png) no-repeat center center;
        width:16px;height:16px;
    }
    .insert-row-before {
        cursor:pointer;
        background: transparent url(/static/img/insertrowbefore.png) no-repeat center center;
        width:16px;height:16px;
    }
    .yui-button#idAppendTag button {
        padding-left: 3em;
        background: url(/static/img/appendrow.png) 10% 50% no-repeat;
    }
    .yui-button#idSaveTag button,
    .yui-button#idSaveExitTag button {
        padding-left: 3em;
        background: url(/static/img/save-as.png) 10% 50% no-repeat;
    }
</style>

<div id="idBB" style="overflow: auto;" >
    <div style="padding-left: 0.5em; padding-top: 0.5em;">
        <input type="button" id="idAppendTag" name="appendTagButton" value="Append tag">
        <input type="button" id="idSaveTag" name="saveTagsButton" value="Save tags">
        <p><br />To edit an existing tag or description click the text. To delete a tag click 
        the delete icon. To add a tag click either of the add icons. <br /><b>NOTE: 
        Modifications to the tag list do NOT take effect unless saved.</b></p>
        <p>&nbsp;</p>
        <div id='idTable'><!-- data table goes here --></div>
    </div>
    &nbsp;<br />
    &nbsp;<br />
    &nbsp;<br />
    &nbsp;<br />
</div>

{% endblock %}

